<template>
  <div id="backcont">
    <div class="meituan-content">
      <div class="login-cont">
        <div class="meituan-title">点餐系统客户端</div>
        <div class="meituan-user">
          <p>账户</p>
          <el-input
            class="inptflex"
            v-model="account"
            style="width: 240px"
            placeholder="输入账户"
            clearable
          />
        </div>
        <div class="meituan-user">
          <p>密码</p>
          <el-input
            class="inptflex"
            v-model="password"
            style="width: 240px"
            placeholder="输人密码"
            type="password"
            show-password
          />
        </div>
        <div class="reg-view" @click="regi = regi == '登录' ? '注册' : '登录'">
          <p>{{ regi }}</p>
        </div>
        <el-button
          v-if="regi == '注册'"
          @click="signin"
          class="meituan-btn"
          :loading="load"
          type="success"
          >登录</el-button
        >
        <el-button
          v-else
          class="meituan-btn"
          @click="register"
          :loading="load"
          type="success"
          >注册</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import {
  reactive,
  toRefs,
  getCurrentInstance,
  callWithAsyncErrorHandling,
} from "vue";
//import { ElMessage } from 'element-plus'
export default {
  setup() {
    const user = reactive({
      account: "",
      password: "",
      regi: "注册",
      load: false,
    });
    //const :lod"
    const {proxy} = getCurrentInstance();
    async function signin() {
      try {
        user.load = true;
        const obj = {account: user.account, password: user.password};
        const res = await new proxy.$request(
          proxy.$urls.m().login,
          obj
        ).modePost();
        console.log(res);
        if (res.status != 200) {
          new proxy.$tips(res.data.error, "warning").mess_age();
        } else {
          new proxy.$tips("登录成功").mess_age();
          //跳转到内容页面
          localStorage.setItem("token", res.data.token);
          // 获取当前时间
          const currentTime = new Date().getTime();
          localStorage.setItem("expirationTime",currentTime);
          new proxy.$router.push({name: "index"});
          //new proxy.$router.push("/index");
        }
        user.load = false;
      } catch (e) {
        user.load = false;
        new proxy.$tips(res.data.error, "error").mess_age();
      }
    }
    async function register() {
      try {
        user.load = true;
        const obj = {account: user.account, password: user.password};
        const res = await new proxy.$request(
          proxy.$urls.m().register,
          obj
        ).modePost();
        console.log(res);
        //console.log(res.status)
        switch (res.status) {
          case 201:
            new proxy.$tips(res.data.message).mess_age();
            break;
          default:
            new proxy.$tips(res.data.error, "warning").mess_age();
            break;
        }
        user.load = false;
      } catch (e) {
        user.load = false;
        new proxy.$tips(res.data.error, "error").mess_age();
      }
    }

    return {...toRefs(user), signin, register};
  },
};
</script>
